<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>

<script>
  const { effect, reactive, ref, shallowRef, toRef, toRefs} = VueReactivity;


  /** 可以将一个对象的属性 变成ref的
   *  toRef并不会将一个不是响应式的变成响应式 */
  /*const state = {name:'ahhh'};
  const nameRef = toRef(state,'name')
  console.log('nameRef:',nameRef);
  /!*
    nameRef: ObjectRefImpl {_object: {…}, _key: "name", __v_isRef: true}
                __v_isRef: true
                _key: "name"
                _object: {name: "ahhh"}
                value: "ahhh"
                __proto__: Object
  *!/*/


  /** */
  /*const p = reactive({name:'ahhh'});
  const r = toRef(p, 'name');
  console.log(r);
  // r.value = 'xxx' // 等价于 p.name = 'xxx'*/


  /** 这东西有撒用？
   *  我们有些时候需要对reactive返回的proxy进行解构
   *  这会丢失响应性*/

  /*
  const proxy = reactive({name: 'ahhh'});
  const {name} = proxy; //如果我们这里解构了
  effect(()=>{
    app.innerHTML = name; //'ahhh' //不会走get 不会被track
  })
  setTimeout(()=>{
    proxy.name = 'jjj'; //不会更新
  },1000)*/

  //就可以使用toRef来解决上面的问题

  /*const name = toRef(proxy, 'name');
  effect(()=>{
    app.innerHTML = name.value; // 访问name.value 相当于 访问 proxy.name, 会被track
  })
  setTimeout(()=>{
    proxy.name = 'jjj'; //会更新
  },1000)*/

  /** 如果存在多个属性呢？ */
  /*
  const proxy = reactive({name: 'ahhh'});
  const name = toRef(proxy, 'name');
  const age = toRef(proxy, 'age');
  effect(()=>{
    app.innerHTML = name.value + age.value;
  })
  setTimeout(()=>{
    proxy.name = 'jjj'; //会更新
    proxy.age = 'yyy'; //会更新
  },1000)*/

  /** 但这样写有点麻烦, 就有了个toRefs*/
  const proxy = reactive({name: 'ahhh', age: 123});
  const {name,age} = toRefs(proxy);

  effect(()=>{
    app.innerHTML = name.value + age.value;
  })
  setTimeout(()=>{
    proxy.name = 'jjjj'
    proxy.age = 234
  },1000)
</script>
</body>
</html>
